<template>

	<view class="home">
		<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11513@2x.png" class="homeimg" mode="">
		</image>
		<view class="headerbox" :style="{'background':back1}">
			<view class="header" :style="{'margin-top':statusBarHeight+'px','height':barHeight+'px'}">
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group@2x.png" class="arrowbox"
					mode=""></image>
			</view>
		</view>
		<view class="bottombox" v-if="flag1">
			<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/no-login.png" class="bottombox_img1"
				mode=""></image>
			<view class="btnn" @click="login">
				立即登录
			</view>
		</view>
		<view class="bottombox" v-else>
			<view class="bottombox_mohuc" v-if="typestr== '抽奖码'||typestr== '答题已完成'">

			</view>
			<view class="msgnone" v-if="typestr== '抽奖码'||typestr== '答题已完成'">
				<image src="/static/微信图片_20250508142655.png" class="img1" mode=""></image>
				<image src="/static/微信图片_20250508143124.png" v-if="typestr== '抽奖码'" class="img2" mode=""></image>
			</view>


			<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11528@2x.png" class="bottombox_img"
				mode=""></image>
			<view class="seachbox">
				<view class="" style="display: flex;align-items: center;">
					<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11529@2x.png"
						class="leftimg" mode=""></image>
					<view class="tt">
						{{contentobj.title}}
					</view>
				</view>

				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11530@2x.png" class="rightimg"
					mode=""></image>
			</view>
			<view class="centertiss">
				<view class="itemti" v-for="(item,index) in contentobj.answer" :key="index" @click="active=index">
					<image
						:src="active==index?'/static/微信图片_20250510102715.png':'https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Rectangle 22448@2x.png'"
						:class="active==index?'itemtiback yy':'itemtiback'" mode=""></image>
					<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Frame@2x(8).png" class="xzactuive"
						v-if="active==index" mode=""></image>
					<view :class="active==index?'test1':'test'">
						{{item.xuanxiang}}、{{item.xxcont}}
					</view>
				</view>

			</view>
			<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11497@2x.png" class="tj"
				@click="statr" mode="widthFix">
			</image>
		</view>

		<uni-popup ref="popup1" :is-mask-click="false" type="center">
			<view class="chongzhongjp3">
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/微信图片_20250506175631.png"
					class="chongzhongjp3_back" mode="">
				</image>
				<view class="gongxinitext">
					您已经完成答题，切勿重复操作
				</view>
				<view class="btn" @click="btnclick()">
					确定
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" @change="close1" type="center">

			<view class="centercjm" v-show="typestr=='抽奖码'&&guanbi!=1">
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11531@2x.png"
					class="centercjmback" mode=""></image>
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Frame@2x(10).png" class="closeicon"
					@click="close" mode="">
				</image>
				<view class="centerbox">
					<view class="title">
						请填写抽奖兑换码
					</view>
					<view class="jihuomaform">
						<input type="text" v-model="cardnum" class="jhminpt" placeholder="抽奖兑换码" />
					</view>
					<view class="btn" @click="huoqu('获取抽奖码')">
						立即获取抽奖码
					</view>
				</view>
			</view>

			<view class="centercjmm" v-show="typestr=='抽奖码'&&guanbi==1">
				<image src="/static/Group 11531@2x.png" class="centercjmback" mode=""></image>
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Frame@2x(10).png" class="closeicon"
					@click="close" mode="">
				</image>
				<view class="jieshucenter">
					<view class="title">
						活动已结束
					</view>
					<image src="/static/图层_4@2x.png" mode="" class="msgicon"></image>
					<view class="text1">
						本次活动已圆满结束 </br>
						感谢您的关注与支持~
					</view>
				</view>
			</view>

			<view class="choujiangmabox" v-show="typestr=='获取抽奖码'">
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/微信图片_20250506160104.png" class="back">
				</image>
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/微信图片_20250506144136.png" class="close"
					mode="" @click="close"></image>
				<view class="centertop">
					<view class="centertop_toptext">
						任务流程
					</view>
					<view class="renwufenleis">
						<view class="itembtn">
							任务一
						</view>
						<view class="itembtn">
							任务二
						</view>
						<view class="itembtn1">
							任务三
						</view>
					</view>
					<view class="jindu">
						<view class="center2">
							<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Mask group@2x.png"
								class="centerimgjindu" mode=""></image>
							<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/download 49@2x.png"
								class="hjtou" mode="">
							</image>
						</view>
					</view>
					<view class="textsline">
						<view class="text">
							到店消费
						</view>
						<view class="text">
							答题并分享海报
						</view>
						<view class="text">
							次日消费
						</view>
					</view>
				</view>
				<view class="contents">
					<view class="title" style="width: 100%;">
						消费达标，获取{{huojiangmaobj.jiang||1}}个抽奖码！
					</view>
					<view class="haibaobox">
						<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11468@2x.png" mode="">
						</image>
					</view>
					<view class="btn" @click="close">
						点击获取更多抽奖码
					</view>
				</view>
			</view>

			<view class="">

			</view>

			<view class="choujiangmabox1" v-show="typestr=='答题成功'">
				<image src="/static/微信图片_20250509164949.png" class="zhiyinimg" mode=""></image>
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/微信图片_20250506143151.png" class="back"
					mode=""></image>
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/微信图片_20250506144136.png" class="close"
					mode="" @click="close('答题成功')"></image>
				<view class="centertop">
					<view class="centertop_toptext">
						任务流程
					</view>
					<view class="renwufenleis">
						<view class="itembtn">
							任务一
						</view>
						<view class="itembtn">
							任务二
						</view>
						<view class="itembtn1">
							任务三
						</view>
					</view>
					<view class="jindu">
						<view class="center">
							<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Mask group@2x.png"
								class="centerimgjindu" mode=""></image>
							<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/download 49@2x.png"
								class="hjtou" mode="heightFix">
							</image>
						</view>
					</view>
					<view class="textsline">
						<view class="text">
							到店消费
						</view>
						<view class="text">
							答题并分享海报
						</view>
						<view class="text">
							次日消费
						</view>
					</view>
				</view>
				<view class="contents" style="margin: auto;">
					<view class="title" style="width: 100%;">
						分享海报，轻松领取抽奖码！
					</view>
					<view class="haibaobox">
						<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/wechat.png"
							class="haibaoboxback" mode=""></image>
					</view>
					<!-- -->
					<!-- 	<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Button@2x.png" class="sharebtn"
						@click="sharefun" style="" mode=""></image> -->

				</view>
				<view class="tiushibtn">
					请点击右上角分享到朋友圈
				</view>
			</view>
			<view class="choujiangmabox" v-show="typestr=='更多抽奖'">
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/微信图片_20250506160104.png" class="back">
				</image>
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/微信图片_20250506144136.png" class="close"
					mode="" @click="close"></image>
				<view class="centertop">
					<view class="centertop_toptext">
						任务流程
					</view>
					<view class="renwufenleis">
						<view class="itembtn">
							任务一
						</view>
						<view class="itembtn">
							任务二
						</view>
						<view class="itembtn1">
							任务三
						</view>
					</view>
					<view class="jindu">
						<view :class="typestr=='更多抽奖'?'center anmation':'center'">
							<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Mask group@2x.png"
								class="centerimgjindu" mode=""></image>
							<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/download 49@2x.png"
								class="hjtou" mode="heightFix">
							</image>
						</view>
					</view>
					<view class="textsline">
						<view class="text">
							到店消费
						</view>
						<view class="text">
							答题并分享海报
						</view>
						<view class="text">
							次日消费
						</view>
					</view>
				</view>
				<view class="contents">
					<view class="title">
						答对了! 获取1个抽奖码
					</view>
					<view class="haibaobox">
						<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11468@2x.png" mode="">
						</image>
					</view>
					<view class="btn" @click="shareCustomImage">
						点击获取更多抽奖码
					</view>
				</view>
			</view>
			<view class="choujiangmabox" style="height: 1028rpx;" v-if="typestr=='分享成功'">
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/微信图片_20250506160104.png"
					style="height: 1028rpx;" class="back">
				</image>
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/微信图片_20250506144136.png" class="close"
					mode="" @click="close('分享成功')"></image>
				<view class="centertop">
					<view class="centertop_toptext">
						任务流程
					</view>
					<view class="renwufenleis">
						<view class="itembtn">
							任务一
						</view>
						<view class="itembtn">
							任务二
						</view>
						<view class="itembtn1">
							任务三
						</view>
					</view>
					<view class="jindu">
						<view class="center">
							<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Mask group@2x.png"
								class="centerimgjindu" mode=""></image>
							<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/download 49@2x.png"
								class="hjtou" mode="heightFix">
							</image>
						</view>
					</view>
					<view class="textsline">
						<view class="text">
							到店消费
						</view>
						<view class="text">
							答题并分享海报
						</view>
						<view class="text">
							次日消费
						</view>
					</view>
				</view>
				<view class="contents">
					<view class="title" style="height: 100rpx;margin-top: 168rpx;">
						分享成功! 获取1个抽奖码
					</view>
					<view class="haibaobox">
						<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11468@2x.png" mode="">
						</image>
					</view>
					<view class="texts"
						style="width: 100%;display: flex;justify-content: space-between;margin:5rpx auto;">
						<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Frame@2x(12).png"
							style="width: 24rpx;height: 24rpx;" mode=""></image>
						<view class="" style="width: 460rpx;font-size: 18rpx;color: #BCBEC7;">
							亲爱的用户,本次活动期间,你需在除当日完成首笔消费,并在次日及以后再次购物且满足68元以上可获取抽奖码
						</view>
					</view>
					<view class="btn" @click="close('分享成功')" style="bottom: 48rpx;">
						关闭
					</view>
				</view>
			</view>
			<view class="choujiangmabox2" v-show="typestr=='答题失败'">
				<image src="/static/微信图片_20250507162504.png" class="back" mode=""></image>
				<view class="dianji" @click="chongxindati">
					点击重新开始答题
				</view>
			</view>
			<view class="choujiangmabox" style="height: 1028rpx;" v-show="typestr=='任务已完成'">
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/微信图片_20250506160104.png"
					style="height: 1028rpx;" class="back"></image>
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/微信图片_20250506144136.png" class="close"
					mode="" @click="close"></image>
				<view class="centertop">
					<view class="centertop_toptext">
						任务流程
					</view>
					<view class="renwufenleis">
						<view class="itembtn">
							任务一
						</view>
						<view class="itembtn">
							任务二
						</view>
						<view class="itembtn1">
							任务三
						</view>
					</view>
					<view class="jindu">
						<view class="center1">
							<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Mask group@2x.png"
								class="centerimgjindu" mode=""></image>
							<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/download 49@2x.png"
								class="hjtou" mode="heightFix">
							</image>
						</view>
					</view>
					<view class="textsline">
						<view class="text">
							到店消费
						</view>
						<view class="text">
							答题并分享海报
						</view>
						<view class="text">
							次日消费
						</view>
					</view>
				</view>
				<view class="contents" style="margin-top: 100rpx;">
					<view class="title" style="width: 400rpx;text-align: center;margin-top: 68rpx;">
						活动期间二次消费达标获取1个奖品码
					</view>
					<view class="haibaobox">
						<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11468@2x.png" mode="">
						</image>
					</view>
					<view class="texts"
						style="width: 100%;display: flex;justify-content: space-between;margin:5rpx auto;">
						<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Frame@2x(12).png"
							style="width: 24rpx;height: 24rpx;" mode=""></image>
						<view class="" style="width: 460rpx;font-size: 18rpx;color: #BCBEC7;">
							亲爱的用户,本次活动期间,你需在当日完成首笔消费,并在次日及以后再次购物且满足68元以上可获取抽奖码
						</view>
					</view>
					<view class="btn" @click="shareCustomImage">
						点击获取更多抽奖码
					</view>
				</view>
			</view>

		</uni-popup>
		<userlogin ref="denglu" @updata="xzmd1"></userlogin>
		<view class="" style="height: 200rpx;">

		</view>
		<Tabbar :page="page"></Tabbar>
	</view>
</template>

<script>
	import userlogin from '@/components/getuser/getuser.vue'
	import Tabbar from '@/components/tabbar.vue'
	import lPainter from '@/uni_modules/lime-painter/components/l-painter/l-painter.vue'
	import {
		wentiinit,
		userinfo,
		fenxaing,
		shurujhma,
		passopen
	} from '@/common/api/api.js'
	import uploadSrc from '@/common/upload.js'
	export default {
		components: {
			userlogin,
			Tabbar
		},
		data() {
			return {
				flag1: false,
				flag: false,
				barHeight: 0,
				statusBarHeight: 0,
				typestr: '',
				cardnum: '',
				page: '',
				src: '',
				guanbi: 0,
				contentobj: {},
				userobj: {},
				huojiangmaobj: {},
				active: 0,
				arr: ['A、这是一个答案', 'B、这是一个答案', 'C、这是一个答案', 'D、这是一个答案']
			}
		},

		onShow() {
			this.flag = false
			this.flag1 = false
			this.page = '/pages/dajiang/index'
			if (uni.getStorageSync('token')) {
				this.isdati()
			} else {
				this.flag1 = true
			}
		},

		onLoad() {
			uni.showShareMenu({
				withShareTicket: true, // 是否使用带 shareTicket 的转发
				menus: ['shareAppMessage', 'shareTimeline'], // 需要显示的菜单列表，例如分享到朋友圈等
			});
			if (uni.getStorageSync('token')) {
				this.init()
			}
		},
		// 监听右上角分享朋友圈
		onShareTimeline() {
			if (this.typestr == '答题成功' && this.flag) {
				this.fenxainginit()
				this.flag = false
			}

			return {
				title: "解锁AI超市赢智能萌宠",
				path: `pages/home/index`, // 分享路径，可携带参数
				imagePath: 'https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/wechat.png'
			}
		},
		// 监听右上角分享好友收藏
		onAddToFavorites() {
			console.log('监听用户点击右上角收藏监听用户点击右上角收藏监听用户点击右上角收藏监听用户点击右上角收藏监听用户点击右上角收藏', this.typestr, this.flag);
			if (this.typestr == '答题成功' && this.flag) {
				setTimeout(() => {
					uni.showToast({
						title: '获取抽奖码失败，请分享朋友圈',
						icon: 'none',
						duration: 2000
					})
				}, 1000)
			}
			return {
				title: "解锁AI超市赢智能萌宠",
				path: `pages/home/index`, // 分享路径，可携带参数
				imagePath: 'https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/wechat.png'
			}
		},
		// 监听右上角分享好友
		onShareAppMessage() {
			console.log('右上角分享好友右上角分享好友右上角分享好友右上角分享好友', this.typestr, this.flag);
			if (this.typestr == '答题成功' && this.flag) {
				setTimeout(() => {
					uni.showToast({
						title: '获取抽奖码失败，请分享朋友圈',
						icon: 'none',
						duration: 2000
					})
				}, 1000)
			}
			return {
				title: "解锁AI超市赢智能萌宠",
				path: `pages/home/index`, // 分享路径，可携带参数
				imagePath: 'https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/wechat.png'
			}
		},
		mounted() {
			console.log('mounted');
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			const {
				top,
				height
			} = wx.getMenuButtonBoundingClientRect();
			this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
			// this.statr()
		},
		methods: {
			login() {
				this.$refs.denglu.DengLu()
			},
			xzmd1() {
				this.isdati()
				this.init()
				this.flag1 = false
			},
			changeImg(imgUrl) {
				this.imgUrl = imgUrl
			},
			// 获取题目或者答案
			async init() {
				const res = await wentiinit()
				if (res.code == 1) {
					this.contentobj = res.data
				}
			},
			async isdati(str) {
				const res = await passopen()


				const res1 = await userinfo()
				if (res1.code == 1) {
					this.userobj = res1.data
					console.log(this.userobj, 'this.userobjthis.userobjthis.userobjthis.userobj');
					// 0：弹出激活框，1：去答题，2：答题已完成，去记录
					if (res1.data.user.jihuo == 0) {
						this.typestr = '抽奖码'
						if (res.code == 1) {
							this.guanbi = res.data.hd_guanbi
							if (res.data.hd_guanbi == 1) {
								this.$refs.popup.open()
								return
							} else {
								this.$refs.popup.open()
							}
						}
					} else if (res1.data.user.jihuo == 2) {
						if (this.typestr == '分享成功') {
							this.$refs.popup.open('center')
							return
						}
						this.typestr = '答题已完成'
						this.$refs.popup1.open('center')
					} else if (res1.data.user.jihuo == 1) {
						console.log();
						if (!str) {
							this.typestr = ''
							this.$refs.popup.close()
							this.$refs.popup1.close()
						} else {
							this.typestr = str
						}
					}
				}
			},
			btnclick() {
				uni.switchTab({
					url: '/pages/home/index'
				})
			},
			close(str) {
				if (str == '分享成功') {
					uni.switchTab({
						url: '/pages/home/index'
					})
				} else if (str == '答题成功') {
					this.init()
				}
				this.$refs.popup.close()
			},
			close1(e) {

				if (e.show == false) {
					if (this.typestr == '分享成功') {
						this.typestr = ''
					}
					if (this.typestr == '答题失败') {
						this.init()
					}
				}

			},
			// 输入激活码
			async huoqu(str) {
				if (!this.cardnum) {
					uni.showToast({
						icon: 'none',
						title: '请输入激活码'
					})
					return
				}
				const res = await shurujhma({
					cardnum: this.cardnum
				})
				if (res.code == 1) {
					this.huojiangmaobj = res.data
					this.typestr = str
					this.isdati(str)

				} else {
					this.cardnum = ''
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			},


			async statr() {
				// 0：弹出激活框，1：去答题，2：答题已完成，去记录
				console.log(this.userobj, 'this.userobj.userthis.userobj.user');
				if (this.userobj.user.jihuo == 0) {
					this.$refs.popup.open()
					this.typestr = '抽奖码'
					return
				}
				if (this.contentobj.answer[this.active]['xuanxiang'] != this.contentobj.right) {
					this.typestr = '答题失败'
					this.$refs.popup.open()
				} else {
					console.log(123123123);
					var that = this
					this.flag = true
					that.typestr = '答题成功'
					that.$refs.popup.open('center')

				}

			},
			chongxindati() {
				this.$refs.popup.close('center')
				this.active = 0

			},
			shareCustomImage() {
				this.typestr = '答题成功'
			},
			open() {
				console.log(123123);
				this.typestr = '任务已完成'
			},
			// 分享海报
			sharefun() {
				// 开关按钮
				uni.showLoading({
					title: '加载中...', // 提示内容
					mask: true // 是否显示透明蒙层，防止触摸穿透（默认false）
				});
				if (this.flag) return
				this.flag = true
				var that = this
				wx.downloadFile({
					url: 'https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/wechat.png',
					success: (res) => {
						uni.hideLoading();
						wx.showShareImageMenu({
							path: res.tempFilePath,
							withShareTicket: false,
							success(res) {
								console.log(res, '----------');
								that.flag = false

								// that.fenxainginit()
							},
							fail(err) {
								that.flag = false
								setTimeout(() => {
									uni.showToast({
										title: '获取抽奖码失败，请分享朋友圈',
										icon: 'none'
									})
								}, 500)
							}
						})
					},
					fail: (err) => {
						that.flag = false
						uni.hideLoading();
						console.log(err, 'err---------------');
					}
				})
			},
			async fenxainginit() {
				console.log('进入------------------');
				var that = this
				const res = await fenxaing()
				console.log(res, 'res----------------------------');
				if (res.code == 1) {
					that.typestr = '分享成功'
				}
			}


		}

	}
</script>

<style lang="scss">
	.yy {
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		box-shadow: 1.6rpx 1.6rpx 3rpx 0px #5954Ba;
		overflow: hidden;
	}

	.tiushibtn {
		width: 650rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		text-align: center;
		line-height: 88rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FE34B9;
		text-align: center;
		line-height: 88rpx;
		margin-top: 30rpx;
		position: absolute;
		bottom: -40rpx;

	}

	.chongzhongjp3 {
		width: 650rpx;
		height: 480rpx;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		position: relative;
		overflow: hidden;

		&_back {
			width: 650rpx;
			height: 554rpx;
			position: absolute;
			z-index: -1;
		}


		.gongxinitext {
			width: 370rpx;
			margin: auto;
			font-size: 36rpx;
			color: #FE34B9;
			font-weight: bold;
			margin-top: 168rpx;
			text-align: center;
		}

		.btn {
			width: 386rpx;
			height: 72rpx;
			background: #8278FF;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			text-align: center;
			line-height: 72rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			margin: auto;
			margin-top: 66rpx;
		}
	}

	.centercjmm {
		width: 660.57rpx;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		overflow: hidden;
		position: relative;

		.centercjmback {
			width: 650rpx;
			height: 646.86rpx;
			position: absolute;
			z-index: -1;
		}

		.closeicon {
			position: absolute;
			width: 36rpx;
			height: 36rpx;
			right: 32rpx;
			top: 22rpx;
		}

		.jieshucenter {
			width: 427.13rpx;
			margin: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 73rpx;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 33rpx;
				color: #1D2129;
			}

			.msgicon {
				width: 427.13rpx;
				height: 381.18rpx;
				margin-top: 20rpx;

			}

			.text1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #1D2129;
				margin-top: 10rpx;
				margin-bottom: 50rpx;
			}
		}
	}

	.centercjm {
		width: 650rpx;
		height: 456rpx;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		overflow: hidden;
		position: relative;

		.centercjmback {
			width: 650rpx;
			height: 456rpx;
			position: absolute;
			z-index: -1;
		}

		.closeicon {
			position: absolute;
			width: 36rpx;
			height: 36rpx;
			right: 22rpx;
			top: 22rpx;
		}

		.centerbox {
			width: 586rpx;
			margin: auto;
			margin-top: 72rpx;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #1D2129;
				width: 100%;
				text-align: center;
			}

			.btn {
				width: 586rpx;
				height: 72rpx;
				background: #8278FF;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				text-align: center;
				line-height: 72rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
				margin-top: 66rpx;
			}

			.jihuomaform {
				width: 586rpx;
				height: 88rpx;
				background: #F7F8FA;
				border-radius: 8rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				margin-top: 50rpx;
				justify-content: center;

				.jhminpt {
					width: 88%;
					font-size: 30rpx;
					margin-right: 20rpx;
				}
			}
		}
	}


	@keyframes widenOnce1 {
		from {
			width: 0px;
		}

		to {
			width: 590rpx;
		}
	}

	@keyframes scaleAnimation {

		0%,
		100% {
			transform: scale(1);
			/* 原始大小 */
		}

		50% {
			transform: scale(0.9);
			/* 缩小到80% */
		}
	}

	@keyframes widenOnce {
		from {
			width: 0px;
		}

		to {
			width: 302rpx;
		}
	}

	@keyframes widenOnce2 {
		from {
			width: 0px;
		}

		to {
			width: 106rpx;
		}
	}

	.choujiangmabox2 {
		width: 650rpx;
		height: 618rpx;
		position: relative;
		overflow: hidden;

		.back {
			width: 650rpx;
			height: 618rpx;
			position: absolute;
			z-index: -1;
		}

		.dianji {
			width: 502rpx;
			height: 72rpx;
			background: #8278FF;
			text-align: center;
			line-height: 72rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			margin: auto;
			margin-top: 500rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}

	.choujiangmabox1 {
		width: 650rpx;
		height: 1278rpx;
		position: relative;
		margin-top: 100rpx;

		.zhiyinimg {
			right: 20%;
			top: -10%;
			width: 358rpx;
			height: 184rpx;
			z-index: 0;
			position: absolute;
			animation: scaleAnimation 2s infinite;
		}

		.back {
			width: 650rpx;
			height: 1200rpx;
			position: absolute;
			overflow: hidden;
			z-index: -1;
		}

		.close {
			position: absolute;
			right: 0%;
			width: 45rpx;
			height: 45rpx;
			top: 0%;
		}

		.contents {
			width: 502rpx;
			margin: auto;
			margin-top: 100rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				color: #FE34B9;
				font-family: "Alimama";
				font-size: 40rpx;
				font-weight: bold;
				width: 350rpx;
				text-align: center;
				margin-bottom: 40rpx;
				margin-top: 144rpx;
			}

			.sharebtn {
				width: 502rpx;
				height: 72rpx;
				position: absolute;
				bottom: 48rpx;
			}

			.btn1 {
				width: 502rpx;
				height: 72rpx;
			}

			.haibaobox {
				width: 482rpx;
				height: 700rpx;
				position: relative;

				.erweima {
					width: 90rpx;
					height: 90rpx;
					border-radius: 10rpx;
					position: absolute;
					right: 95rpx;
					bottom: 70rpx;
					z-index: 999;
				}

				.haibaoboxback {
					width: 482rpx;
					height: 700rpx;
					position: absolute;
					z-index: -1;
				}
			}
		}

		.centertop {
			width: 602rpx;
			margin: auto;
			overflow: hidden;

			&_toptext {
				font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
				font-weight: bold;
				font-size: 30rpx;
				color: #FE34B9;
				margin-top: 14rpx;
			}

			.jindu {
				width: 100%;
				height: 30rpx;
				background: #8395FF;
				border-radius: 15rpx 15rpx 15rpx 15rpx;
				margin: auto;
				margin-top: 20rpx;

				.center {
					width: 302rpx;
					height: 30rpx;
					background: #8278FF;
					box-shadow: inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.23), inset 0rpx -4rpx 8rpx 0rpx #665AFF;
					border-radius: 15rpx 15rpx 15rpx 15rpx;
					position: relative;
					display: flex;
					align-items: center;
					transition: 1s;
					animation: widenOnce 2s 1;

					/* 关键：animation-iteration-count设为1 */
					.hjtou {
						width: 81.79rpx;
						height: 76.79rpx;
						position: absolute;
						right: -5%;
					}

					.centerimgjindu {
						width: 100%;
						height: 30rpx;
						position: absolute;
						border-radius: 15rpx 15rpx 15rpx 15rpx;
					}
				}



			}

			.textsline {
				width: 494rpx;
				margin: auto;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #1D2129;
				}
			}

			.renwufenleis {
				width: 510rpx;
				margin: auto;
				margin-top: 26rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.itembtn {
					width: 112rpx;
					height: 40rpx;
					background: #8278FF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					line-height: 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
				}

				.itembtn1 {
					width: 112rpx;
					height: 40rpx;
					background: rgba(130, 120, 255, 0.5);
					border-radius: 20rpx;
					line-height: 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}

	}

	.choujiangmabox {
		width: 650rpx;
		height: 896rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;

		.back {
			width: 650rpx;
			height: 896rpx;
			position: absolute;
			z-index: -1;
		}

		.close {
			position: absolute;
			right: 0%;
			width: 45rpx;
			height: 45rpx;
			top: 0%;
		}

		.contents {
			width: 502rpx;
			// margin: auto;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				color: #FE34B9;
				font-family: "Alimama";
				font-size: 40rpx;
				font-weight: bold;
				margin-top: 144rpx;
				width: 350rpx;
				text-align: center;
				margin-bottom: 30rpx;
			}

			.sharebtn {}

			.haibaobox {
				width: 482rpx;
				height: 290rpx;
				position: relative;

				image {
					width: 482rpx;
					height: 290rpx;
					position: absolute;
					z-index: -1;
				}
			}

			.btn1 {
				width: 502rpx;
				height: 72rpx;
				position: absolute;
				bottom: 48rpx;
				border-radius: 10rpx;
			}

			.btn {
				width: 502rpx;
				height: 72rpx;
				position: absolute;
				bottom: 48rpx;
				text-align: center;
				line-height: 72rpx;
				background: #8278FF;
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
				border-radius: 10rpx;
			}
		}

		.centertop {
			width: 602rpx;

			&_toptext {
				font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
				font-weight: bold;
				font-size: 30rpx;
				color: #FE34B9;
				margin-top: 14rpx;
			}

			.jindu {
				width: 100%;
				height: 30rpx;
				background: #8395FF;
				border-radius: 15rpx 15rpx 15rpx 15rpx;
				margin: auto;
				margin-top: 30rpx;

				.anmation {
					// width: 302rpx !important;
					// transition: 1s;
				}

				.center2 {
					width: 106rpx;
					height: 30rpx;
					background: #8278FF;
					box-shadow: inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.23), inset 0rpx -4rpx 8rpx 0rpx #665AFF;
					border-radius: 15rpx 15rpx 15rpx 15rpx;
					position: relative;
					display: flex;
					align-items: center;
					transition: 1s;
					animation: widenOnce2 2s 1;

					/* 关键：animation-iteration-count设为1 */
					.hjtou {
						width: 100rpx;
						height: 76.79rpx;
						position: absolute;
						right: -5%;
					}

					.centerimgjindu {
						width: 100%;
						height: 30rpx;
						position: absolute;
						border-radius: 15rpx 15rpx 15rpx 15rpx;
					}
				}

				.center1 {
					width: 590rpx;
					height: 30rpx;
					background: #8278FF;
					box-shadow: inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.23), inset 0rpx -4rpx 8rpx 0rpx #665AFF;
					border-radius: 15rpx 15rpx 15rpx 15rpx;
					position: relative;
					display: flex;
					align-items: center;
					transition: 1s;
					animation: widenOnce1 2s 1;

					/* 关键：animation-iteration-count设为1 */
					.hjtou {
						width: 100rpx;
						height: 76.79rpx;
						position: absolute;
						right: -5%;
					}

					.centerimgjindu {
						width: 100%;
						height: 30rpx;
						position: absolute;
						border-radius: 15rpx 15rpx 15rpx 15rpx;
					}
				}

				.center {
					width: 302rpx;
					height: 30rpx;
					background: #8278FF;
					box-shadow: inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.23), inset 0rpx -4rpx 8rpx 0rpx #665AFF;
					border-radius: 15rpx 15rpx 15rpx 15rpx;
					position: relative;
					display: flex;
					align-items: center;
					animation: widenOnce 2s 1;

					/* 关键：animation-iteration-count设为1 */
					.hjtou {
						width: 100rpx;
						height: 76.79rpx;
						position: absolute;
						right: -5%;
					}

					.centerimgjindu {
						width: 100%;
						height: 30rpx;
						position: absolute;
						border-radius: 15rpx 15rpx 15rpx 15rpx;
					}
				}
			}

			.textsline {
				width: 494rpx;
				margin: auto;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #1D2129;
				}
			}

			.renwufenleis {
				width: 510rpx;
				margin: auto;
				margin-top: 26rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.itembtn {
					width: 112rpx;
					height: 40rpx;
					background: #8278FF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					line-height: 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
				}

				.itembtn1 {
					width: 112rpx;
					height: 40rpx;
					background: rgba(130, 120, 255, 0.5);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					height: 40rpx;
					line-height: 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}

	}

	.home {
		width: 100%;
		position: relative;
		overflow: hidden;

		.homeimg {
			width: 100%;
			height: 1704rpx;
			position: absolute;
			z-index: -1;

		}

		.bottombox {
			width: 100%;
			overflow: hidden;
			margin-top: 628rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;

			.btnn {
				width: 568rpx;
				height: 72rpx;
				background: #8278FF;
				border-radius: 12rpx;
				text-align: center;
				line-height: 72rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				position: absolute;
				bottom: 42rpx;
				color: #FFFFFF;
			}

			&_img {
				width: 100%;
				height: 798rpx;
				position: absolute;
				z-index: -1;
			}

			&_img1 {
				width: 100%;
				height: 798rpx;
			}

			&_mohuc {
				width: 688rpx;
				position: absolute;
				z-index: 9;
				height: 723rpx;
				filter: blur(4px);
				/* 对元素本身应用模糊 */
				backdrop-filter: blur(0px);
				/* 对背景应用模糊 */
				margin: auto;
				border-radius: 0 0 30rpx 30rpx;
				top: 60rpx;
				right: 0;
				left: 0;
				bottom: 0;
			}

			.msgnone {
				width: 300rpx;
				position: absolute;
				z-index: 9;
				margin: auto;
				top: 0rpx;
				right: 0;
				left: 0;
				bottom: 0;
				height: 350rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.img1 {
					width: 340rpx;
					height: 320rpx;
				}

				.img2 {
					width: 150rpx;
					height: 60rpx;
					display: block;
					margin: auto;
				}
			}

			.tj {
				height: 76rpx;
				margin: auto;
				display: block;
				width: 568rpx;
				margin-top: 24rpx;
				margin-bottom: 34rpx;
			}

			.centertiss {
				width: 568rpx;
				margin-top: 128rpx;
				height: 360rpx;
				overflow-y: auto;


				.itemti {
					width: 568rpx;
					height: 76rpx;
					display: flex;
					align-items: center;
					position: relative;
					margin-bottom: 20rpx;

					.xzactuive {
						width: 44rpx;
						height: 44rpx;
						position: absolute;
						margin-left: 36rpx;
					}

					.itemtiback {
						position: absolute;
						z-index: -1;
						width: 568rpx;
						height: 76rpx;
					}

					.test1 {
						width: 100%;
						text-align: center;
						font-weight: 560;
						font-size: 32rpx;
						color: #333333;
					}

					.test {
						width: 100%;
						text-align: center;
						font-size: 32rpx;
						color: #333333;
					}
				}
			}

			.seachbox {
				width: 650rpx;
				margin: auto;
				margin-top: 86rpx;
				display: flex;
				justify-content: space-between;

				.leftimg {
					width: 90rpx;
					height: 80rpx;
				}

				.rightimg {
					width: 46rpx;
					height: 32rpx;

				}

				.tt {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					width: 508rpx;
					text-overflow: ellipsis;
					margin-left: 10rpx;
					/* 显示省略号 */
				}
			}




		}

		.headerbox {
			width: 100%;
			overflow: hidden;
			position: fixed;
			z-index: 999;

			.header {
				width: 100%;
				height: var(--status-bar-height);
				// height: 64rpx;
				// overflow: hidden;
				// margin-top: 100rpx;
				margin-bottom: 14rpx;
				display: flex;
				align-items: center;
				position: relative;

				.arrowbox {
					width: 128.13rpx;
					height: 50.9rpx;
					margin-left: 30rpx;
				}

				.shanglogo {
					width: 330rpx;
					height: 64rpx;
					background: rgba(255, 255, 255, 0.6);
					border-radius: 50rpx 50rpx 50rpx 50rpx;
					border: 1rpx solid rgba(151, 151, 151, 0.2);
					display: flex;
					align-items: center;
					margin-left: 38rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #1D2129;

					.logo {
						width: 33rpx;
						height: 33rpx;
						margin-left: 16rpx;
						margin-right: 6rpx;
					}

					.arrow {
						width: 32rpx;
						height: 32rpx;
						margin-left: 6rpx;
					}
				}
			}
		}
	}
</style>